<template>
<div style=" width: 100%;height: 100%">
  <el-card class="treetable" >
    <div style="height: 470px;">
      <el-button type="text" style="color: #73b8ff" icon="el-icon-back" @click="$router.push('/mother/resourceDownload')">返回列表</el-button>
      <el-card style="height: 430px">
        <div style="margin-left: 80px;display: flex">
            <el-card style="width: 400px;height: 390px;">
              <el-image
                  style="width: 300px; height: 300px"
                  :src="data.imgurl"
                  :fit="fit"></el-image>
            </el-card>
            <div style="margin-left: 100px; width: 600px;height: 350px">
              <h1 style="color:#6D757A;">名称：{{data.name}}</h1>
              <h2 style="color: #6D757A">营养价值：</h2>
              <div style="margin-left: 50px;margin-right: 50px">
                <span style="color: #99999A;">{{data.brief}}</span>
              </div>
              <h2 style="color: #6D757A;margin-top: 20px">诱发疾病:</h2>
              <div style="margin-left: 50px;margin-right: 50px">
                <span style="color: #99999A;">{{data.disease}}</span>
              </div>
              <div style="margin-left: 50px;width: 100%; margin-top: 40px;display: flex">
                <el-button plain type="primary" icon="el-icon-thumb" @click="goodsave"
                           style="margin-left: 10px;width: 200px;height: 50px">为我点赞</el-button>
                <div style="margin-left: 100px;margin-top: 15px">
                  <span style="color: #409eff;" >{{data.good}}&ensp; 点赞数</span>
                  <span style="color: #ffafaf; margin-left: 50px">{{data.readnumber}}&ensp;阅读量</span>
                </div>
              </div>
            </div>
        </div>
      </el-card>
    </div>
  </el-card>

  <el-card class="treetable" >
    <!--        文章评论信息-->
    <div class="replyOfArticle">
      <h2>评论</h2>
      <!--            自己发表评论-->
      <div class="releaseComment">
        <div style="flex: 12;display: flex;gap: 5px;padding-bottom: 50px;">
          <el-input
              v-model="commentForm.content"
              type="textarea"
              rows="3"
              placeholder="一定要说正确的话哦，争议评论将被删除"
              style="margin-top: 30px;flex: 20;font-size: 16px; "
          >
          </el-input>
          <el-button round type="primary" style="flex: 1;margin-top:30px" @click="save">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:50px;height: 50px">
              <div style="flex: 1;display: flex;height: 25px;width: 50px;justify-content: center;align-items: center">
                <div style="flex: 1;">
                  发
                </div>
                <div style="flex: 1;">
                  表
                </div>
              </div>
              <div style="flex: 1;display: flex;height: 25px;width: 50px;justify-content: center;align-items: center">
                <div style="flex: 1;">
                  评
                </div>
                <div style="flex: 1;">
                  论
                </div>
              </div>
            </div>
          </el-button>
        </div>
      </div>
      <!--            评论列表-->
      <div v-for="item in comments" :key="item.id" class="replyItemList">
        <el-image :src="item.avatar" style="width: 70px; height: 70px; border-radius: 50%;margin-top: 30px;flex: 1"></el-image>
        <div class="replyItemListContent">
          <!--                    评论人的用户名-->
          <div style="flex: 1;font-size: 12px;color: #6D757A">
            {{ item.nickName}}:
          </div>
          <!--                    评论内容-->
          <div style="flex: 3;color: #222222; padding: 10px 0px;font-size: 14px;">
            <div style="overflow:hidden;text-overflow: ellipsis;height: auto;word-break: break-all;">{{ item.content }}</div>
          </div>
          <!--                   时间和其他 -->
          <div style="flex: 1;font-size: 12px;color: #99A2AA;display: flex">
            <span style="margin-left: 10px;flex: 1">{{ item.time }}</span>
            <!--                        回复和删除-->
            <div style="flex: 5">
              <el-link type="primary"  @click="handleReply(item.id)">回复</el-link>
              <el-link type="danger" @click="del(item.id)" v-if="user.id == item.uid" style="margin-left: 20px">删除</el-link>
            </div>
          </div>
          <div class="childrenRpelyList" v-if="item.children.length">
            <!--                   子集评论列表-->
            <div class="childrenOfReply" v-for="subItem in item.children" :key="subItem.id" style="flex: 1">
              <!--                            子评论的用户头像-->

              <div style="flex: 1;display: flex ;width: 60px;">
                <el-image :src="subItem.avatar" style="height: 60px; border-radius: 50%;flex: 1"></el-image>
              </div>
              <!--                            子评论的具体信息-->
              <div style="flex: 28;display: flex;flex-direction: column">
                <div style="display: flex;">
                  <span style="flex: 1;font-size: 12px;text-align: center;margin-top: 5px;color: #6D757A">{{subItem.nickName}}</span>
                  <!--                                    被回复人的名称-->
                  <div style="flex: 2;font-size: 12px;color: #409EFF;padding: 5px 10px" v-if="subItem.pnickName">
                    <span style="margin-right: 5px; color: #6D757A">回复</span> @{{ subItem.pnickName }}:
                  </div>
                  <!--                                回复的信息和回复人的用户名-->
                  <div style="display: flex;flex: 18">
                    <span style="font-size: 12px;margin-top: 5px">{{subItem.content}}</span>
                  </div>

                </div>
                <!--                                    回复和删除按钮-->
                <div style="flex: 1;display: flex;align-items: center;justify-items: center;margin-top: 10px">
                  <span style="margin-left: 10px;flex: 1;font-size: 12px;color: #6D757A">{{ subItem.time }}</span>
                  <div style="flex: 5;display: flex;padding-left: 5px">
                    <el-link type="primary"  style="font-size: 12px" @click="handleReply(subItem.id)">回复</el-link>
                    <el-link type="danger" @click="del(subItem.id)" v-if="user.id === subItem.uid" style="font-size: 12px;margin-left: 20px">删除</el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--子集评论菜单-->
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible" width="50%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save"  size="small">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
import request from "@/router/request";

export default {
  name: "FoodDetails",
  data() {
    return {
      user: sessionStorage.getItem("user1") ? JSON.parse(sessionStorage.getItem("user1")) : {},
      id: this.$route.query.id,
      data:[],
      dialogFormVisible:false,
      commentForm:{},
      comments: [],
    }
  },
  created() {
    this.load()
    this.loadComment()
  },
  methods:{
    load(){
      request.get("/food/id/"+this.id).then(res=>{
        this.data=res.data
      })
    },
    //点赞
    goodsave(){
      if(!this.user.id){
        this.$message.warning("请登录后在进行操作");
        return
      }
      this.data.good=this.data.good+1
      request.post("/food/goodsave",this.data).then(res=>{
        console.log(res)
      })
    },
    //查询此文章的所有评论
    loadComment() {
      request.get("/comment/tree/" + this.id).then(res => {
        this.comments = res.data
        // console.log(this.user.id+"=================="+this.comments.uid)
      })
    },

    //发布评论
    save() {
      if (!this.user.id) {
        this.$message.warning("请登录后操作")
        return
      }
      this.commentForm.fid = this.id
      this.commentForm.uid=this.user.id
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      request.post("/comment", this.commentForm).then(res => {
        if (res.state === '0') {
          this.$message.success("评论成功")
          this.commentForm = {}  // 初始化评论对象内容
          this.loadComment()
          this.dialogFormVisible = false
        } else {
          this.$message.error("评论失败")
        }
      })
    },

    //回复
    handleReply(pid) {
      this.commentForm = { pid: pid }
      this.dialogFormVisible = true
    },

    //删除信息
    del(id) {
      request.delete("/comment/" + id).then(res => {
        if (res.state === '0') {
          this.$message.success("删除成功")
          this.loadComment()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.treetable {
  height: calc(100%);
  margin-top: 20px;
  overflow-y: auto;
  // padding-bottom: 50px;
  .el-col-lg-4-8 {
    width: 20%;
  }
}
</style>
